<template>
  <div>
    <main>
      <!-- 搜索栏 -->
      <div class="search">
        <el-select v-model="value" placeholder="是否考过">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-input
          placeholder="请输入邮箱搜索"
          prefix-icon="el-icon-search"
          v-model="keywords_email"
        >
        </el-input>
        <el-input
          placeholder="请输入昵称搜索"
          prefix-icon="el-icon-search"
          v-model="keywords_nickname"
        >
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="keywordsSearch"
          >搜索</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="toggleSelection()"
          >重置</el-button
        >

        <el-button type="primary" id="pub_work" @click="pubWork"
          >布置作业</el-button
        >
      </div>

      <!-- 学生管理表格区域 -->
      <el-table
        v-if="!filterFlag"
        border
        stripe
        ref="multipleTable"
        :row-key="getKey"
        :data="studentsList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @select="handleSelect"
        @select-all="selectAllRow"
      >
        <el-table-column align="center" :reserve-selection="true" type="selection" width="40">
        </el-table-column>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="indexMethods"
          width="60"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="nickname"
          label="姓名"
          width="94"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="createDate"
          label="注册时间"
          width="130"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.createDate | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="email"
          label="邮箱"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="地区"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="testTime"
          label="考试时间"
          width="130"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              scope.row.testTime == null
                ? "暂无"
                : scope.row.testTime.substring(0, 10)
            }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="reportNum"
          label="是否考过"
          width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.reportNum > 0 ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="ifPass"
          label="状态"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="specialPubWork(scope.row.id)"
              >布置作业</el-button
            >
            <el-button type="primary" size="mini" @click="checkWork(scope.row)"
              >查看作业</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 搜索后的展示表格 -->
      <el-table
        v-if="filterFlag"
        border
        stripe
        ref="multipleTable"
        :data="filterList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="40">
        </el-table-column>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="indexMethods"
          width="60"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="nickname"
          label="姓名"
          width="94"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="createDate"
          label="注册时间"
          width="130"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.createDate | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="email"
          label="邮箱"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="地区"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="testTime"
          label="考试时间"
          width="130"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.testTime == null ? "暂无" : scope.row.testTime }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="reportNum"
          label="是否考过"
          width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.reportNum > 0 ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="ifPass"
          label="状态"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="specialPubWork(scope.row.id)"
              >布置作业</el-button
            >
            <el-button type="primary" size="mini" @click="checkWork(scope.row)"
              >查看作业</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        large
        background
        :page-size="rows"
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      options: [{
        value: '1',
        label: '是'
      }, {
        value: '0',
        label: '否'
      }],
      value: null, // 是否考过value
      keywords_email: '', // 邮箱关键字搜索
      keywords_nickname: '', // 昵称关键字搜索
      filterFlag: false,
      filterList: [], // 筛选后的学生列表

      // 布置作业表格数据
      pubTableData: [],
      multipleSelection: [],
      studentsList: [], // 学生列表
      // 分页数据
      lxTotal: 0,//已联系题数
      total: 0,//总题数
      page: 1,
      rows: 20,
      pages: 0, //总页数
      userIdsStr: '',
      tmIdsStr: '',
      selectRowAry: [],  // 二维数组，保存每一页选中的行
    }
  },
  created () {
    this.getStudentList(this.page)
  },
  updated () {
    // 切换页码时, 设置复选框的选中状态
    this.$nextTick(() => {
      this.studentsList.forEach(el => {
        this.multipleSelection.forEach(item => {
          // 这里 toggleRowSelection 的第一个参数必须是 el，设置 item 无效
          if (el.id === item.id) this.$refs['multipleTable'].toggleRowSelection(el, true)
        })
      })
    })
  },
  methods: {
    getKey (row) {
      return row.id
    },

     // 全选按钮事件
    selectAllRow (selection) {
      /**
       * @param {Array} selection：当前页全选 / 取消全选后的结果
       */
      this.multipleSelection = selection
    },

    indexMethods (index) {
      return this.page > 1 ? (this.page - 1) * 20 + index + 1 : index + 1
    },
    // 关键字搜索
    keywordsSearch () {
      this.page = 1
      sendPost(api.getUserList, {
        page: this.page,
        rows: 20,
        isKs: this.value,
        email: this.keywords_email,
        nickname: this.keywords_nickname,
      }).then(res => {
        this.studentsList = res.data.list
        this.total = res.data.total
      })

    },
    // 获取学生列表
    getStudentList (page) {
      sendPost(api.getUserList, {
        page: page,
        rows: 20,
        email: this.keywords_email,
        nickname: this.keywords_nickname,
        isKs: this.value,
      }).then(res => {
        // console.log(res.data)
        this.studentsList = res.data.list
        this.total = res.data.total
      })
    },
    // 点击布置作业按钮触发事件
    pubWork () {
      // console.log(1);
      // 暂存一下刚刚挑选的学生的id
      if (this.multipleSelection.length) {

        const userIds = []
        this.multipleSelection.forEach(item => {
          userIds.push(item.id)
          // console.log(item.id);
        })
        this.userIdsStr = userIds.join()
        sessionStorage.setItem('uid', userIds.join())

        this.$router.push('StudentManage/pubWork')
      } else {
        this.$msg.info('请先选择学生!')
      }

    },
    // 点击每个学生单独的布置作业按钮触发
    specialPubWork (id) {
      sessionStorage.setItem('uid', id)
      this.$router.push('StudentManage/pubWork')
    },
    // 点击检查作业按钮触发事件
    checkWork (scope) {
      sessionStorage.setItem('uname', scope.nickname)
      // sessionStorage.setItem('uid')
      this.$router.push('/CheckWork/workList?scope=' + JSON.stringify(scope) + '&nickname=' + scope.nickname + '&userId=' + scope.id)
      sessionStorage.setItem('uid', scope.id)
    },

    // 取消复选框选择状态
    toggleSelection (rows) {
      // 取消所有复选框
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }

      this.filterFlag = false
      // 清空选择框，输入框
      this.keywords_email = ''
      this.keywords_nickname = ''
      this.value = null
      // 重新获取列表数据
      this.getStudentList(this.page)
    },
    handleSelect (val) {
      // console.log(val);
      // this.selectRowAry[this.page] = selection
    },
    handleSelectionChange (val) {
      console.log(val)
      this.multipleSelection = val
    },
    // 当前页码发生改变时触发
    handleCurrentChange (value) {
      this.page = value
      this.getStudentList(this.page)
    },
  }
}
</script>

<style lang="less" scoped>
main {
  width: 75rem;
  margin: 0 auto;
  /deep/.el-button--primary {
    background-color: #ff5342;
    border-color: #ff5342;
  }
  .search {
    margin-top: 30px;
    height: 4rem;
    line-height: 4rem;
    background-color: #fff;
    .el-select {
      width: 7.5rem;
      margin-right: 4rem;
    }
    .el-input {
      width: 15.3rem;
      margin-right: 3.3rem;
      border-radius: 50% !important;
    }
    .el-button {
      margin-right: 2rem;
      height: 2.5rem;
      border: none;
    }
    #pub_work {
      margin-left: 4.5rem;
      margin-right: 0;
    }
    /deep/.el-button--mini,
    .el-button--mini.is-round {
      padding: 7px 15px;
    }
  }
  a {
    font-family: Microsoft YaHei;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    height: 100%;
    &.router-link-exact-active {
      border-top: 2px solid #ff5342;
      color: #ff5342;
    }
  }

  // 分页器
  .el-pagination {
    text-align: center;
    margin-top: 6.25rem;
  }
}
</style>
